<template>
  <div>
    <x-header id="header" :left-options="{backText: ''}">提现明细</x-header>
    <div class="main main-header">
      <div class="cash">
        <div class="title">提现金额</div>
        <div class="amount">0.00</div>
        <div class="to">
          <div class="to-name">到帐银行卡</div>
          <!--<div class="to-code">尾号6666</div>-->
          <x-button class="to-add" mini>增加</x-button>
        </div>
        <div class="tips">温馨提示：提现在4个工作日内到账，如有疑问可联系客户经理或客</div>
        <div class="save">
          <x-button class="save-button" >提交</x-button>
        </div>
      </div>
      <div class="hot-line">客服热线：13777777777</div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'cash'
  }
</script>

<style scoped>
  .main {
    overflow: auto;
    background-image: radial-gradient(46% 99%, #F98657 50%, #F14E2C 100%);
    min-height: 100vh;
  }
  .cash {
    background: #fff;
    display: flex;
    flex-direction: column;
    margin: 1rem auto 0;
    padding: 5rem 1.5rem 2.5rem;
    border-radius: 10px;
    width: 19.64rem;
  }
  .title {
    font-size: 17px;
    color: #8D8D8D;
    padding-bottom: 1.5rem;
    text-align: center;
  }
  .amount {
    font-size: 36px;
    color: #4A90E2;
    padding-bottom: 6.5rem;
    text-align: center;
  }
  .to {
    display: flex;
    padding-bottom: 1.5rem;
  }
  .to-name {
    flex:1;
    font-size: 17px;
    color: #8D8D8D;
  }
  .to-add {
    background: #F14E2C;
    border-radius: 4px;
    color: #fff;
  }
  .to-add::after {
    border: none;
  }
  .to-code {
    font-size: 17px;
    color: #8D8D8D;
  }
  .tips {
    color: #A6A6A6;
    padding-bottom: 3.5rem;
  }
  .save {
    margin-top: 0;
    width: 100%;
  }
  .save-button {
    background: #FE9E2E;
    color: #fff;
  }
  .hot-line {
    position: absolute;
    bottom: 10px;
    color: #fff;
    text-align: center;
    width: 100%;
  }
</style>
